<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <title>首页</title>
    <#assign base=request.contextPath  />
    <#setting  number_format="0.##"/>
    <base id="base" href="${base}">
    <!--favicon-->
    <link rel="icon" href="${base}/assets/images/favicon.ico" type="image/x-icon">
    <!-- Vector CSS -->
    <link href="${base}/assets/plugins/vectormap/jquery-jvectormap-2.0.2.css" rel="stylesheet"/>
    <!-- simplebar CSS-->
    <link href="${base}/assets/plugins/simplebar/css/simplebar.css" rel="stylesheet"/>
    <!-- Bootstrap core CSS-->
    <link href="${base}/assets/css/bootstrap.min.css" rel="stylesheet"/>
    <!-- animate CSS-->
    <link href="${base}/assets/css/animate.css" rel="stylesheet" type="text/css"/>
    <!-- Icons CSS-->
    <link href="${base}/assets/css/icons.css" rel="stylesheet" type="text/css"/>
    <!-- Sidebar CSS-->
    <link href="${base}/assets/css/sidebar-menu.css" rel="stylesheet"/>
    <!-- Custom Style-->
    <link href="${base}/assets/css/app-style.css" rel="stylesheet"/>

</head>

<body>

<!-- start loader -->
<div id="pageloader-overlay" class="visible incoming"><div class="loader-wrapper-outer"><div class="loader-wrapper-inner" ><div class="loader"></div></div></div></div>
<!-- end loader -->

<!-- Start wrapper-->
<div id="wrapper">

    <!--Start sidebar-wrapper-->
    <div id="sidebar-wrapper" data-simplebar="" data-simplebar-auto-hide="true">
        <div class="brand-logo">
            <a href="index.html">
                <img src="${base}/assets/images/logo-icon.png" class="logo-icon" alt="logo icon">
                <h5 class="logo-text">Xmino Admin</h5>
            </a>
        </div>

        <div class="user-details">
            <div class="side-avatar mb-3"><img class="side-user-img" src="${base}/assets/images/avatars/avatar-13.png" alt="user avatar"></div>
            <div class="text-center">
                <h6 class="mb-0">Mark Jhonson</h6>
            </div>
        </div>

        <ul class="sidebar-menu do-nicescrol">
            <li class="sidebar-header">MAIN NAVIGATION</li>
            <li>
                <a href="javaScript:void();" class="waves-effect">
                    <i class="zmdi zmdi-view-dashboard"></i> <span>Dashboard</span><i class="fa fa-angle-left pull-right"></i>
                </a>
                <ul class="sidebar-submenu">
                    <li><a href="index.html"><i class="zmdi zmdi-long-arrow-right"></i>index1</a></li>
<#--                    <li><a href="${base}/index/index2.html"><i class="zmdi zmdi-long-arrow-right"></i>index2</a></li>-->
                </ul>
            </li>
            <li>
                            <a href="${base}/index/user.html" class="waves-effect">
                                <i class="zmdi zmdi-calendar-check"></i> <span>用户管理</span>
                                <small class="badge float-right badge-light">New</small>
                            </a>
                        </li>
<#--            <li>-->
<#--                <a href="javaScript:void();" class="waves-effect">-->
<#--                    <i class="zmdi zmdi-layers"></i>-->
<#--                    <span>UI Elements</span> <i class="fa fa-angle-left pull-right"></i>-->
<#--                </a>-->
<#--                <ul class="sidebar-submenu">-->
<#--                    <li><a href="ui-typography.html"><i class="zmdi zmdi-long-arrow-right"></i> Typography</a></li>-->
<#--                    <li><a href="ui-cards.html"><i class="zmdi zmdi-long-arrow-right"></i> Cards</a></li>-->
<#--                    <li><a href="ui-buttons.html"><i class="zmdi zmdi-long-arrow-right"></i> Buttons</a></li>-->
<#--                    <li><a href="ui-nav-tabs.html"><i class="zmdi zmdi-long-arrow-right"></i> Nav Tabs</a></li>-->
<#--                    <li><a href="${base}/index/ui-accordions.html"><i class="zmdi zmdi-long-arrow-right"></i>AAAAA</a></li>-->
<#--                    <li><a href="ui-modals.html"><i class="zmdi zmdi-long-arrow-right"></i> Modals</a></li>-->
<#--                    <li><a href="ui-list-groups.html"><i class="zmdi zmdi-long-arrow-right"></i> List Groups</a></li>-->
<#--                    <li><a href="${base}/index/ui-bootstrap-elements.html"><i class="zmdi zmdi-long-arrow-right"></i>BBBBB</a></li>-->
<#--                    <li><a href="ui-pagination.html"><i class="zmdi zmdi-long-arrow-right"></i> Pagination</a></li>-->
<#--                    <li><a href="ui-alerts.html"><i class="zmdi zmdi-long-arrow-right"></i> Alerts</a></li>-->
<#--                    <li><a href="ui-progressbars.html"><i class="zmdi zmdi-long-arrow-right"></i> Progress Bars</a></li>-->
<#--                    <li><a href="ui-checkbox-radio.html"><i class="zmdi zmdi-long-arrow-right"></i> Checkboxes & Radios</a></li>-->
<#--                    <li><a href="ui-notification.html"><i class="zmdi zmdi-long-arrow-right"></i> Notifications</a></li>-->
<#--                    <li><a href="ui-sweet-alert.html"><i class="zmdi zmdi-long-arrow-right"></i> Sweet Alerts</a></li>-->
<#--                </ul>-->
<#--            </li>-->
<#--            <li>-->
<#--                <a href="javaScript:void();" class="waves-effect">-->
<#--                    <i class="zmdi zmdi-card-travel"></i>-->
<#--                    <span>Components</span>-->
<#--                    <i class="fa fa-angle-left pull-right"></i>-->
<#--                </a>-->
<#--                <ul class="sidebar-submenu">-->
<#--                    <li><a href="components-range-slider.html"><i class="zmdi zmdi-long-arrow-right"></i> Range Sliders</a></li>-->
<#--                    <li><a href="components-image-carousel.html"><i class="zmdi zmdi-long-arrow-right"></i> Image Carousels</a></li>-->
<#--                    <li><a href="components-grid-layouts.html"><i class="zmdi zmdi-long-arrow-right"></i> Grid Layouts</a></li>-->
<#--                    <li><a href="components-switcher-buttons.html"><i class="zmdi zmdi-long-arrow-right"></i> Switcher Buttons</a></li>-->
<#--                    <li><a href="components-pricing-table.html"><i class="zmdi zmdi-long-arrow-right"></i> Pricing Tables</a></li>-->
<#--                    <li><a href="components-vertical-timeline.html"><i class="zmdi zmdi-long-arrow-right"></i> Vertical Timeline</a></li>-->
<#--                    <li><a href="components-horizontal-timeline.html"><i class="zmdi zmdi-long-arrow-right"></i> Horizontal Timeline</a></li>-->
<#--                    <li><a href="components-fancy-lightbox.html"><i class="zmdi zmdi-long-arrow-right"></i> Fancy Lightbox</a></li>-->
<#--                    <li><a href="components-color-palette.html"><i class="zmdi zmdi-long-arrow-right"></i> Color Palette</a></li>-->
<#--                </ul>-->
<#--            </li>-->
<#--            <li>-->
<#--                <a href="javaScript:void();" class="waves-effect">-->
<#--                    <i class="zmdi zmdi-chart"></i> <span>Charts</span>-->
<#--                    <i class="fa fa-angle-left float-right"></i>-->
<#--                </a>-->
<#--                <ul class="sidebar-submenu">-->
<#--                    <li><a href="charts-chartjs.html"><i class="zmdi zmdi-long-arrow-right"></i> Chart JS</a></li>-->
<#--                    <li><a href="charts-morris.html"><i class="zmdi zmdi-long-arrow-right"></i> Morris Charts</a></li>-->
<#--                    <li><a href="charts-sparkline.html"><i class="zmdi zmdi-long-arrow-right"></i> Sparkline Charts</a></li>-->
<#--                    <li><a href="charts-peity.html"><i class="zmdi zmdi-long-arrow-right"></i> Peity Charts</a></li>-->
<#--                    <li><a href="charts-other.html"><i class="zmdi zmdi-long-arrow-right"></i> Other Charts</a></li>-->
<#--                </ul>-->
<#--            </li>-->
<#--            <li>-->
<#--                <a href="javaScript:void();" class="waves-effect">-->
<#--                    <i class="zmdi zmdi-invert-colors"></i> <span>UI Icons</span>-->
<#--                    <i class="fa fa-angle-left float-right"></i>-->
<#--                </a>-->
<#--                <ul class="sidebar-submenu">-->
<#--                    <li><a href="icons-font-awesome.html"><i class="zmdi zmdi-long-arrow-right"></i> Font Awesome</a></li>-->
<#--                    <li><a href="icons-material-designs.html"><i class="zmdi zmdi-long-arrow-right"></i> Material Design</a></li>-->
<#--                    <li><a href="icons-themify.html"><i class="zmdi zmdi-long-arrow-right"></i> Themify Icons</a></li>-->
<#--                    <li><a href="icons-simple-line-icons.html"><i class="zmdi zmdi-long-arrow-right"></i> Line Icons</a></li>-->
<#--                    <li><a href="icons-flags.html"><i class="zmdi zmdi-long-arrow-right"></i> Flag Icons</a></li>-->
<#--                </ul>-->
<#--            </li>-->
<#--            <li>-->
<#--                <a href="calendar.html" class="waves-effect">-->
<#--                    <i class="zmdi zmdi-calendar-check"></i> <span>Calendar</span>-->
<#--                    <small class="badge float-right badge-light">New</small>-->
<#--                </a>-->
<#--            </li>-->

<#--            <li>-->
<#--                <a href="javaScript:void();" class="waves-effect">-->
<#--                    <i class="zmdi zmdi-email"></i>-->
<#--                    <span>Mailbox</span>-->
<#--                    <small class="badge float-right badge-warning">12</small>-->
<#--                </a>-->
<#--                <ul class="sidebar-submenu">-->
<#--                    <li><a href="mail-inbox.html"><i class="zmdi zmdi-long-arrow-right"></i> Inbox</a></li>-->
<#--                    <li><a href="mail-compose.html"><i class="zmdi zmdi-long-arrow-right"></i> Compose</a></li>-->
<#--                    <li><a href="mail-read.html"><i class="zmdi zmdi-long-arrow-right"></i> Read Mail</a></li>-->
<#--                </ul>-->
<#--            </li>-->

<#--            <li>-->
<#--                <a href="javaScript:void();" class="waves-effect">-->
<#--                    <i class="zmdi zmdi-format-list-bulleted"></i> <span>Forms</span>-->
<#--                    <i class="fa fa-angle-left pull-right"></i>-->
<#--                </a>-->
<#--                <ul class="sidebar-submenu">-->
<#--                    <li><a href="form-inputs.html"><i class="zmdi zmdi-long-arrow-right"></i> Basic Inputs</a></li>-->
<#--                    <li><a href="form-input-group.html"><i class="zmdi zmdi-long-arrow-right"></i> Input Groups</a></li>-->
<#--                    <li><a href="form-layouts.html"><i class="zmdi zmdi-long-arrow-right"></i> Form Layouts</a></li>-->
<#--                    <li><a href="form-advanced.html"><i class="zmdi zmdi-long-arrow-right"></i> Form Advanced</a></li>-->
<#--                    <li><a href="form-uploads.html"><i class="zmdi zmdi-long-arrow-right"></i> Form Uploads</a></li>-->
<#--                    <li><a href="form-validation.html"><i class="zmdi zmdi-long-arrow-right"></i> Form Validation</a></li>-->
<#--                    <li><a href="form-step-wizard.html"><i class="zmdi zmdi-long-arrow-right"></i> Form Wizard</a></li>-->
<#--                    <li><a href="form-text-editor.html"><i class="zmdi zmdi-long-arrow-right"></i> Form Editor</a></li>-->
<#--                </ul>-->
<#--            </li>-->

<#--            <li>-->
<#--                <a href="javaScript:void();" class="waves-effect">-->
<#--                    <i class="zmdi zmdi-lock"></i> <span>Authentication</span>-->
<#--                    <i class="fa fa-angle-left float-right"></i>-->
<#--                </a>-->
<#--                <ul class="sidebar-submenu">-->
<#--                    <li><a href="authentication-signin.html"><i class="zmdi zmdi-long-arrow-right"></i> SignIn 1</a></li>-->
<#--                    <li><a href="authentication-signup.html"><i class="zmdi zmdi-long-arrow-right"></i> SignUp 1</a></li>-->
<#--                    <li><a href="authentication-signin2.html"><i class="zmdi zmdi-long-arrow-right"></i> SignIn 2</a></li>-->
<#--                    <li><a href="authentication-signup2.html"><i class="zmdi zmdi-long-arrow-right"></i> SignUp 2</a></li>-->
<#--                    <li><a href="authentication-lock-screen.html"><i class="zmdi zmdi-long-arrow-right"></i> Lock Screen</a></li>-->
<#--                    <li><a href="authentication-reset-password.html"><i class="zmdi zmdi-long-arrow-right"></i> Reset Password 1</a></li>-->
<#--                    <li><a href="authentication-reset-password2.html"><i class="zmdi zmdi-long-arrow-right"></i> Reset Password 2</a></li>-->
<#--                </ul>-->
<#--            </li>-->

<#--            <li>-->
<#--                <a href="widgets.html" class="waves-effect">-->
<#--                    <i class="zmdi zmdi-widgets"></i> <span>Widgets</span>-->
<#--                    <small class="badge float-right badge-danger">10</small>-->
<#--                </a>-->
<#--            </li>-->

<#--            <li>-->
<#--                <a href="javaScript:void();" class="waves-effect">-->
<#--                    <i class="zmdi zmdi-grid"></i> <span>Tables</span>-->
<#--                    <i class="fa fa-angle-left float-right"></i>-->
<#--                </a>-->
<#--                <ul class="sidebar-submenu">-->
<#--                    <li><a href="table-simple-tables.html"><i class="zmdi zmdi-long-arrow-right"></i> Simple Tables</a></li>-->
<#--                    <li><a href="table-data-tables.html"><i class="zmdi zmdi-long-arrow-right"></i> Data Tables</a></li>-->
<#--                </ul>-->
<#--            </li>-->

<#--            <li>-->
<#--                <a href="javaScript:void();" class="waves-effect">-->
<#--                    <i class="zmdi zmdi-map"></i> <span>Maps</span>-->
<#--                    <i class="fa fa-angle-left float-right"></i>-->
<#--                </a>-->
<#--                <ul class="sidebar-submenu">-->
<#--                    <li><a href="maps-google.html"><i class="zmdi zmdi-long-arrow-right"></i> Google Maps</a></li>-->
<#--                    <li><a href="maps-vector.html"><i class="zmdi zmdi-long-arrow-right"></i> Vector Maps</a></li>-->
<#--                </ul>-->
<#--            </li>-->

<#--            <li>-->
<#--                <a href="javaScript:void();" class="waves-effect">-->
<#--                    <i class="zmdi zmdi-collection-folder-image"></i> <span>Sample Pages</span>-->
<#--                    <i class="fa fa-angle-left float-right"></i>-->
<#--                </a>-->
<#--                <ul class="sidebar-submenu">-->
<#--                    <li><a href="pages-invoice.html"><i class="zmdi zmdi-long-arrow-right"></i> Invoice</a></li>-->
<#--                    <li><a href="pages-user-profile.html"><i class="zmdi zmdi-long-arrow-right"></i> User Profile</a></li>-->
<#--                    <li><a href="pages-blank-page.html"><i class="zmdi zmdi-long-arrow-right"></i> Blank Page</a></li>-->
<#--                    <li><a href="pages-coming-soon.html"><i class="zmdi zmdi-long-arrow-right"></i> Coming Soon</a></li>-->
<#--                    <li><a href="pages-403.html"><i class="zmdi zmdi-long-arrow-right"></i> 403 Error</a></li>-->
<#--                    <li><a href="pages-404.html"><i class="zmdi zmdi-long-arrow-right"></i> 404 Error</a></li>-->
<#--                    <li><a href="pages-500.html"><i class="zmdi zmdi-long-arrow-right"></i> 500 Error</a></li>-->
<#--                </ul>-->
<#--            </li>-->

<#--            <li>-->
<#--                <a href="javaScript:void();" class="waves-effect">-->
<#--                    <i class="fa fa-share"></i> <span>Multilevel</span>-->
<#--                    <i class="fa fa-angle-left pull-right"></i>-->
<#--                </a>-->
<#--                <ul class="sidebar-submenu">-->
<#--                    <li><a href="javaScript:void();"><i class="zmdi zmdi-long-arrow-right"></i> Level One</a></li>-->
<#--                    <li>-->
<#--                        <a href="javaScript:void();"><i class="zmdi zmdi-long-arrow-right"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>-->
<#--                        <ul class="sidebar-submenu">-->
<#--                            <li><a href="javaScript:void();"><i class="zmdi zmdi-long-arrow-right"></i> Level Two</a></li>-->
<#--                            <li>-->
<#--                                <a href="javaScript:void();"><i class="zmdi zmdi-long-arrow-right"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>-->
<#--                                <ul class="sidebar-submenu">-->
<#--                                    <li><a href="javaScript:void();"><i class="zmdi zmdi-long-arrow-right"></i> Level Three</a></li>-->
<#--                                    <li><a href="javaScript:void();"><i class="zmdi zmdi-long-arrow-right"></i> Level Three</a></li>-->
<#--                                </ul>-->
<#--                            </li>-->
<#--                        </ul>-->
<#--                    </li>-->
<#--                    <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-long-arrow-right"></i> Level One</a></li>-->
<#--                </ul>-->
<#--            </li>-->
<#--            <li class="sidebar-header">LABELS</li>-->
<#--            <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-coffee text-danger"></i> <span>Important</span></a></li>-->
<#--            <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-chart-donut text-success"></i> <span>Warning</span></a></li>-->
<#--            <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-share text-info"></i> <span>Information</span></a></li>-->
        </ul>

    </div>
    <!--End sidebar-wrapper-->

    <!--Start topbar header-->
    <header class="topbar-nav">
        <nav class="navbar navbar-expand fixed-top">
            <ul class="navbar-nav mr-auto align-items-center">
                <li class="nav-item">
                    <a class="nav-link toggle-menu" href="javascript:void();">
                        <i class="icon-menu menu-icon"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <form class="search-bar">
                        <input type="text" class="form-control" placeholder="Enter keywords">
                        <a href="javascript:void();"><i class="icon-magnifier"></i></a>
                    </form>
                </li>
            </ul>

            <ul class="navbar-nav align-items-center right-nav-link">
                <li class="nav-item dropdown-lg">
                    <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();">
                        <i class="fa fa-envelope-open-o"></i><span class="badge badge-danger badge-up">22</span></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                You have 22 new messages
                                <span class="badge badge-danger">22</span>
                            </li>
                            <li class="list-group-item">
                                <a href="javaScript:void();">
                                    <div class="media">
                                        <div class="avatar"><img class="align-self-start mr-3" src="${base}/assets/images/avatars/avatar-5.png" alt="user avatar"></div>
                                        <div class="media-body">
                                            <h6 class="mt-0 msg-title">Jhon Deo</h6>
                                            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
                                            <small>Today, 4:10 PM</small>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="list-group-item">
                                <a href="javaScript:void();">
                                    <div class="media">
                                        <div class="avatar"><img class="align-self-start mr-3" src="${base}/assets/images/avatars/avatar-6.png" alt="user avatar"></div>
                                        <div class="media-body">
                                            <h6 class="mt-0 msg-title">Sara Jen</h6>
                                            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
                                            <small>Yesterday, 8:30 AM</small>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="list-group-item">
                                <a href="javaScript:void();">
                                    <div class="media">
                                        <div class="avatar"><img class="align-self-start mr-3" src="${base}/assets/images/avatars/avatar-7.png" alt="user avatar"></div>
                                        <div class="media-body">
                                            <h6 class="mt-0 msg-title">Dannish Josh</h6>
                                            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
                                            <small>5/11/2018, 2:50 PM</small>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="list-group-item">
                                <a href="javaScript:void();">
                                    <div class="media">
                                        <div class="avatar"><img class="align-self-start mr-3" src="${base}/assets/images/avatars/avatar-8.png" alt="user avatar"></div>
                                        <div class="media-body">
                                            <h6 class="mt-0 msg-title">Katrina Mccoy</h6>
                                            <p class="msg-info">Lorem ipsum dolor sit amet.</p>
                                            <small>1/11/2018, 2:50 PM</small>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="list-group-item text-center"><a href="javaScript:void();">See All Messages</a></li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item dropdown-lg">
                    <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();">
                        <i class="fa fa-bell-o"></i><span class="badge badge-info badge-up">14</span></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                You have 14 Notifications
                                <span class="badge badge-info">14</span>
                            </li>
                            <li class="list-group-item">
                                <a href="javaScript:void();">
                                    <div class="media">
                                        <i class="zmdi zmdi-accounts fa-2x mr-3 text-info"></i>
                                        <div class="media-body">
                                            <h6 class="mt-0 msg-title">New Registered Users</h6>
                                            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="list-group-item">
                                <a href="javaScript:void();">
                                    <div class="media">
                                        <i class="zmdi zmdi-coffee fa-2x mr-3 text-warning"></i>
                                        <div class="media-body">
                                            <h6 class="mt-0 msg-title">New Received Orders</h6>
                                            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="list-group-item">
                                <a href="javaScript:void();">
                                    <div class="media">
                                        <i class="zmdi zmdi-notifications-active fa-2x mr-3 text-danger"></i>
                                        <div class="media-body">
                                            <h6 class="mt-0 msg-title">New Updates</h6>
                                            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="list-group-item text-center"><a href="javaScript:void();">See All Notifications</a></li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item language">
                    <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();"><i class="fa fa-flag"></i></a>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li class="dropdown-item"> <i class="flag-icon flag-icon-gb mr-2"></i> English</li>
                        <li class="dropdown-item"> <i class="flag-icon flag-icon-fr mr-2"></i> French</li>
                        <li class="dropdown-item"> <i class="flag-icon flag-icon-cn mr-2"></i> Chinese</li>
                        <li class="dropdown-item"> <i class="flag-icon flag-icon-de mr-2"></i> German</li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link dropdown-toggle dropdown-toggle-nocaret" data-toggle="dropdown" href="#">
                        <span class="user-profile"><img src="${base}/assets/images/avatars/avatar-13.png" class="img-circle" alt="user avatar"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li class="dropdown-item user-details">
                            <a href="javaScript:void();">
                                <div class="media">
                                    <div class="avatar"><img class="align-self-start mr-3" src="${base}/assets/images/avatars/avatar-13.png" alt="user avatar"></div>
                                    <div class="media-body">
                                        <h6 class="mt-2 user-title">Sarajhon Mccoy</h6>
                                        <p class="user-subtitle">mccoy@example.com</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="dropdown-divider"></li>
                        <li class="dropdown-item"><i class="icon-envelope mr-2"></i> Inbox</li>
                        <li class="dropdown-divider"></li>
                        <li class="dropdown-item"><i class="icon-wallet mr-2"></i> Account</li>
                        <li class="dropdown-divider"></li>
                        <li class="dropdown-item"><i class="icon-settings mr-2"></i> Setting</li>
                        <li class="dropdown-divider"></li>
                        <li class="dropdown-item"><i class="icon-power mr-2"></i> Logout</li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
    <!--End topbar header-->

    <div class="clearfix"></div>

    <div class="content-wrapper">
        <div class="container-fluid">

            <div class="row mt-3">
                <div class="col-12 col-lg-6 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="media align-items-center">
                                <div class="media-body">
                                    <h5 class="mb-0 text-danger">846 </h5>
                                    <p class="mb-0">Total Orders</p>
                                </div>
                                <div class="w-circle-icon rounded-circle gradient-ibiza">
                                    <i class="zmdi zmdi-shopping-basket text-white"></i>
                                </div>
                            </div>
                            <hr class="my-2"/>
                            <small class="mb-0">+1.2% <i class="zmdi zmdi-long-arrow-up"></i> Since Last Week</small>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="media align-items-center">
                                <div class="media-body">
                                    <h5 class="mb-0 text-success">425</h5>
                                    <p class="mb-0">New Users</p>
                                </div>
                                <div class="w-circle-icon rounded-circle gradient-ohhappiness">
                                    <i class="zmdi zmdi-account-circle text-white"></i>
                                </div>
                            </div>
                            <hr class="my-2"/>
                            <small class="mb-0">+2.4% <i class="zmdi zmdi-long-arrow-up"></i> Since Last Week</small>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="media align-items-center">
                                <div class="media-body">
                                    <h5 class="mb-0 text-primary">526</h5>
                                    <p class="mb-0">Downloads</p>
                                </div>
                                <div class="w-circle-icon rounded-circle gradient-deepblue">
                                    <i class="zmdi zmdi-download text-white"></i>
                                </div>
                            </div>
                            <hr class="my-2"/>
                            <small class="mb-0">+1.5% <i class="zmdi zmdi-long-arrow-up"></i> Since Last Week</small>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="media align-items-center">
                                <div class="media-body">
                                    <h5 class="mb-0 text-warning">82%</h5>
                                    <p class="mb-0">Monthly Sales</p>
                                </div>
                                <div class="w-circle-icon rounded-circle gradient-hossein">
                                    <i class="zmdi zmdi-shopping-cart text-white"></i>
                                </div>
                            </div>
                            <hr class="my-2"/>
                            <small class="mb-0">+4.2% <i class="zmdi zmdi-long-arrow-up"></i>  Since Last Week</small>
                        </div>
                    </div>
                </div>
            </div><!--End Row-->


            <div class="row">
                <div class="col-12 col-lg-6 col-xl-4">
                    <div class="card">
                        <div class="card-body">
                            <p class="mb-0 extra-small-font">Last Week Orders</p>
                            <h5 class="mb-3" style="color:#008b8b;"><i class="zmdi zmdi-shopping-cart mr-1"></i>875,46</h5>
                            <canvas id="dash2-chart-1" height="270"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6 col-xl-4">
                    <div class="card">
                        <div class="card-body">
                            <p class="mb-0 extra-small-font">Last Week Revenue</p>
                            <h5 class="mb-3" style="color:#ee0979;"><i class="zmdi zmdi-chart mr-1"></i>$745,21</h5>
                            <canvas id="dash2-chart-2" height="270"></canvas>
                        </div>

                    </div>
                </div>
                <div class="col-12 col-lg-6 col-xl-4">
                    <div class="card">
                        <div class="card-body">
                            <p class="mb-0 extra-small-font">Last Week Visitors</p>
                            <h5 class="mb-3" style="color:#795548;"><i class="zmdi zmdi-eye mr-1"></i>952,16</h5>
                            <canvas id="dash2-chart-3" height="270"></canvas>
                        </div>

                    </div>
                </div>
            </div><!--End Row-->


            <div class="card">
                <div class="card-header">Top Selling Region</div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-12 col-lg-12 col-xl-7">
                            <div class="table-responsive">
                                <table class="table">
                                    <tbody>
                                    <tr>
                                        <td><i class="flag-icon flag-icon-us"></i></td>
                                        <td>USA</td>
                                        <td>$45,256</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <span class="mr-2">55%</span>
                                                <div>
                                                    <div class="progress">
                                                        <div class="progress-bar gradient-ohhappiness" role="progressbar" style="width: 55%;"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><i class="flag-icon flag-icon-au"></i></td>
                                        <td>Australia</td>
                                        <td>$85,356</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <span class="mr-2">65%</span>
                                                <div>
                                                    <div class="progress">
                                                        <div class="progress-bar gradient-ibiza" role="progressbar" style="width: 65%;"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><i class="flag-icon flag-icon-be"></i></td>
                                        <td>Romania</td>
                                        <td>$25,686</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <span class="mr-2">35%</span>
                                                <div>
                                                    <div class="progress">
                                                        <div class="progress-bar gradient-scooter" role="progressbar" style="width: 35%;"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><i class="flag-icon flag-icon-br"></i></td>
                                        <td>Brasil</td>
                                        <td>$75,836</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <span class="mr-2">75%</span>
                                                <div>
                                                    <div class="progress">
                                                        <div class="progress-bar gradient-purpink" role="progressbar" style="width: 75%;"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><i class="flag-icon flag-icon-gb"></i></td>
                                        <td>United Kingdom</td>
                                        <td>$98,386</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <span class="mr-2">85%</span>
                                                <div>
                                                    <div class="progress">
                                                        <div class="progress-bar gradient-blooker" role="progressbar" style="width: 85%;"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><i class="flag-icon flag-icon-in"></i></td>
                                        <td>India</td>
                                        <td>$35,746</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <span class="mr-2">55%</span>
                                                <div>
                                                    <div class="progress">
                                                        <div class="progress-bar gradient-forest" role="progressbar" style="width: 55%;"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-12 col-lg-12 col-xl-5">
                            <div id="dashboard-map" style="height: 300px;"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12 col-lg-12 col-xl-4">
                    <h6 class="mb-0 text-uppercase">Google Analytics</h6>
                    <hr>
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="pr-2 pl-2 border-right border-light-3">
                                    <h6 class="">Bounce Rate {Avg}</h6>
                                    <span id="dash2-chart-4"></span>
                                </div>
                                <div class="pr-2 pl-2">
                                    <h5 class="mb-0">37.54%</h5>
                                    <small class="mb-0">+22.60% <i class="zmdi zmdi-long-arrow-up"></i></small>
                                </div>
                            </div>
                            <hr>
                            <div class="d-flex align-items-center">
                                <div class="pr-2 pl-2 border-right border-light-3">
                                    <h6 class="">Pageviews {Avg}</h6>
                                    <span id="dash2-chart-5"></span>
                                </div>
                                <div class="pr-2 pl-2">
                                    <h5 class="mb-0">42.14%</h5>
                                    <small class="mb-0">-68.60% <i class="zmdi zmdi-long-arrow-down"></i></small>
                                </div>
                            </div>
                            <hr>
                            <div class="d-flex align-items-center">
                                <div class="pr-2 pl-2 border-right border-light-3">
                                    <h6 class="">New Sessions {Avg}</h6>
                                    <span id="dash2-chart-6"></span>
                                </div>
                                <div class="pr-2 pl-2">
                                    <h5 class="mb-0">76.40%</h5>
                                    <small class="mb-0">+36.60% <i class="zmdi zmdi-long-arrow-up"></i></small>
                                </div>
                            </div>
                            <hr>
                            <div class="d-flex align-items-center">
                                <div class="pr-2 pl-2 border-right border-light-3">
                                    <h6 class="">Time On Site {Avg}</h6>
                                    <span id="dash2-chart-7"></span>
                                </div>
                                <div class="pr-2 pl-2">
                                    <h5 class="mb-0">2m:15s</h5>
                                    <small class="mb-0">+20.60% <i class="zmdi zmdi-long-arrow-up"></i></small>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="col-12 col-lg-12 col-xl-8">
                    <h6 class="mb-0 text-uppercase">Social Media Followers</h6>
                    <hr>

                    <div class="card">
                        <div class="card-body">
                            <div class="row row-group m-0 border-bottom border-light">
                                <div class="col-12 col-lg-4 col-xl-4">
                                    <div class="card-body text-center">
                                        <i class="zmdi zmdi-facebook-box text-facebook fa-2x mb-2"></i>
                                        <h5 class="mb-0 text-facebook">26,573</h5>
                                        <p class="mb-0">Likes</p>
                                    </div>
                                </div>
                                <div class="col-12 col-lg-4 col-xl-4">
                                    <div class="card-body text-center">
                                        <i class="zmdi zmdi-youtube text-youtube fa-2x mb-2"></i>
                                        <h5 class="mb-0 text-youtube">13,911</h5>
                                        <p class="mb-0">Subscribs</p>
                                    </div>
                                </div>
                                <div class="col-12 col-lg-4 col-xl-4">
                                    <div class="card-body text-center">
                                        <i class="zmdi zmdi-instagram text-instagram fa-2x mb-2"></i>
                                        <h5 class="mb-0 text-instagram">18,364</h5>
                                        <p class="mb-0">Followers</p>
                                    </div>
                                </div>
                            </div>
                            <div class="row row-group m-0">
                                <div class="col-12 col-lg-4 col-xl-4">
                                    <div class="card-body text-center">
                                        <i class="zmdi zmdi-google-plus-box text-google fa-2x mb-2"></i>
                                        <h5 class="mb-0 text-google-plus">42,243</h5>
                                        <p class="mb-0">Circled By</p>
                                    </div>
                                </div>
                                <div class="col-12 col-lg-4 col-xl-4">
                                    <div class="card-body text-center">
                                        <i class="zmdi zmdi-twitter-box text-twitter fa-2x mb-2"></i>
                                        <h5 class="mb-0 text-twitter">45,911</h5>
                                        <p class="mb-0">Followers</p>
                                    </div>
                                </div>
                                <div class="col-12 col-lg-4 col-xl-4">
                                    <div class="card-body text-center">
                                        <i class="zmdi zmdi-linkedin-box text-linkedin fa-2x mb-2"></i>
                                        <h5 class="mb-0 text-linkedin">18,364</h5>
                                        <p class="mb-0">Followers</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <div class="row text-center row-group m-0">
                                <div class="col-12 col-lg-4 col-xl-4">
                                    <div class="media align-items-center">
                                        <i class="zmdi zmdi-circle text-success"></i>
                                        <div class="media-body">
                                            <p class="mb-0 ">Desktop</p>
                                            <h6 class="mb-0">50%</h6>
                                            <h5 class="mb-0">82,153</h5>
                                        </div>
                                        <div class=""><i class="zmdi zmdi-desktop-mac text-success fa-2x"></i></div>
                                    </div>
                                </div>
                                <div class="col-12 col-lg-4 col-xl-4">
                                    <div class="media align-items-center">
                                        <i class="zmdi zmdi-circle text-danger"></i>
                                        <div class="media-body">
                                            <p class="mb-0">Mobile</p>
                                            <h6 class="mb-0">30%</h6>
                                            <h5 class="mb-0">65,163</h5>
                                        </div>
                                        <div class=""><i class="zmdi zmdi-smartphone-setup fa-2x text-danger"></i></div>
                                    </div>
                                </div>
                                <div class="col-12 col-lg-4 col-xl-4">
                                    <div class="media align-items-center text-warning">
                                        <i class="zmdi zmdi-circle"></i>
                                        <div class="media-body">
                                            <p class="mb-0">Tablet</p>
                                            <h6 class="mb-0">25%</h6>
                                            <h5 class="mb-0">22,956</h5>
                                        </div>
                                        <div class=""><i class="zmdi zmdi-tablet-mac fa-2x text-warning"></i></div>
                                    </div>
                                </div>
                            </div>
                            <div class="progress mt-3" style="height: 10px;">
                                <div class="progress-bar bg-success" style="width:50%"></div>
                                <div class="progress-bar bg-danger" style="width:30%;"></div>
                                <div class="progress-bar bg-warning" style="width:20%;"></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div><!--End Row-->

            <div class="row">
                <div class="col-12 col-lg-12 col-xl-8">
                    <h6 class="mb-0 text-uppercase">Recent Purchases</h6>
                    <hr>
                    <div class="table-responsive">
                        <table class="table align-items-center text-center table-spacing">
                            <thead>
                            <tr>
                                <th>Image</th>
                                <th>Product</th>
                                <th>Price</th>
                                <th>State</th>
                                <th>Date</th>
                                <th>Delete</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><img src="${base}/assets/images/products/05.png" class="product-img" alt="product img"></td>
                                <td>Sony Xperia M4</td>
                                <td>$249</td>
                                <td><span class="btn btn-sm btn-outline-success">Active</span></td>
                                <td>04/01/2019</td>
                                <td><i class="zmdi zmdi-close"></i></td>
                            </tr>
                            <tr>
                                <td><img src="${base}/assets/images/products/02.png" class="product-img" alt="product img"></td>
                                <td>Apple iPhone 6</td>
                                <td>$849</td>
                                <td><span class="btn btn-sm btn-light">Disabled</span></td>
                                <td>04/01/2019</td>
                                <td><i class="zmdi zmdi-close"></i></td>
                            </tr>
                            <tr>
                                <td><img src="${base}/assets/images/products/04.png" class="product-img" alt="product img"></td>
                                <td>HTC One M9</td>
                                <td>$999</td>
                                <td><span class="btn btn-sm btn-outline-warning">Paused</span></td>
                                <td>04/01/2019</td>
                                <td><i class="zmdi zmdi-close"></i></td>
                            </tr>
                            <tr>
                                <td><img src="${base}/assets/images/products/03.png" class="product-img" alt="product img"></td>
                                <td>Samsung Galaxy S7</td>
                                <td>$749</td>
                                <td><span class="btn btn-sm btn-outline-success">Active</span></td>
                                <td>04/01/2019</td>
                                <td><i class="zmdi zmdi-close"></i></td>
                            </tr>
                            <tr>
                                <td><img src="${base}/assets/images/products/06.png" class="product-img" alt="product img"></td>
                                <td>Apple iPhone 5</td>
                                <td>$249</td>
                                <td><span class="btn btn-sm btn-outline-warning">Paused</span></td>
                                <td>04/01/2019</td>
                                <td><i class="zmdi zmdi-close"></i></td>
                            </tr>
                            <tr>
                                <td><img src="${base}/assets/images/products/01.png" class="product-img" alt="product img"></td>
                                <td>Sony Xperia Z5</td>
                                <td>$249</td>
                                <td><span class="btn btn-sm btn-light">Disabled</span></td>
                                <td>04/01/2019</td>
                                <td><i class="zmdi zmdi-close"></i></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="col-12 col-lg-12 col-xl-4">
                    <h6 class="mb-0 text-uppercase">New Sine Up</h6>
                    <hr>
                    <div class="card">
                        <div class="card-body">
                            <div class="media align-items-center">
                                <img src="${base}/assets/images/avatars/avatar-1.png" class="rounded-circle customer-img" alt="user avatar">
                                <div class="media-body ml-3">
                                    <h6 class="mb-0">Benji Harper </h6>
                                    <p class="mb-0 extra-small-font">UI Designer</p>
                                </div>
                                <button class="btn btn-sm btn-round btn-primary">Add</button>
                            </div>
                            <hr>
                            <div class="media align-items-center">
                                <img src="${base}/assets/images/avatars/avatar-2.png" class="rounded-circle customer-img" alt="user avatar">
                                <div class="media-body ml-3">
                                    <h6 class="mb-0">John Michael </h6>
                                    <p class="mb-0 extra-small-font">Project Manger</p>
                                </div>
                                <button class="btn btn-sm btn-round btn-primary">Add</button>
                            </div>
                            <hr>
                            <div class="media align-items-center">
                                <img src="${base}/assets/images/avatars/avatar-3.png" class="rounded-circle customer-img" alt="user avatar">
                                <div class="media-body ml-3">
                                    <h6 class="mb-0">Justine Myranda </h6>
                                    <p class="mb-0 extra-small-font">Php Developer</p>
                                </div>
                                <button class="btn btn-sm btn-round btn-primary">Add</button>
                            </div>
                            <hr>
                            <div class="media align-items-center">
                                <img src="${base}/assets/images/avatars/avatar-4.png" class="rounded-circle customer-img" alt="user avatar">
                                <div class="media-body ml-3">
                                    <h6 class="mb-0">Janet Lucas </h6>
                                    <p class="mb-0 extra-small-font">Team Leader</p>
                                </div>
                                <button class="btn btn-sm btn-round btn-primary">Add</button>
                            </div>
                            <hr>
                            <div class="media align-items-center">
                                <img src="${base}/assets/images/avatars/avatar-5.png" class="rounded-circle customer-img" alt="user avatar">
                                <div class="media-body ml-3">
                                    <h6 class="mb-0">Alex Smith </h6>
                                    <p class="mb-0 extra-small-font">Graphic Designer</p>
                                </div>
                                <button class="btn btn-sm btn-round btn-primary">Add</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!--End Row-->

        </div>
        <!-- End container-fluid-->

    </div><!--End content-wrapper-->
    <!--Start Back To Top Button-->
    <a href="javaScript:void();" class="back-to-top"><i class="fa fa-angle-double-up"></i> </a>
    <!--End Back To Top Button-->

    <!--Start footer-->
    <footer class="footer">
        <div class="container">
            <div class="text-center">
                Copyright © 2018 Dashtreme Admin
            </div>
        </div>
    </footer>
    <!--End footer-->

</div><!--End wrapper-->


<!-- Bootstrap core JavaScript-->
<script src="${base}/assets/js/jquery.min.js"></script>
<script src="${base}/assets/js/popper.min.js"></script>
<script src="${base}/assets/js/bootstrap.min.js"></script>

<!-- simplebar js -->
<script src="${base}/assets/plugins/simplebar/js/simplebar.js"></script>
<!-- sidebar-menu js -->
<script src="${base}/assets/js/sidebar-menu.js"></script>

<!-- Custom scripts -->
<script src="${base}/assets/js/app-script.js"></script>

<!-- Chart js -->
<script src="${base}/assets/plugins/Chart.js/Chart.min.js"></script>
<!-- Vector map JavaScript -->
<script src="${base}/assets/plugins/vectormap/jquery-jvectormap-2.0.2.min.js"></script>
<script src="${base}/assets/plugins/vectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- Sparkline JS -->
<script src="${base}/assets/plugins/sparkline-charts/jquery.sparkline.min.js"></script>
<!-- Easy Pie Chart JS -->
<script src="${base}/assets/plugins/jquery.easy-pie-chart/jquery.easypiechart.min.js"></script>
<!--Peity Chart -->
<script src="${base}/assets/plugins/peity/jquery.peity.min.js"></script>

<script src="${base}/assets/js/index2.js"></script>

</body>
</html>
